<script setup>
import { gameGetAPI } from '@/api/AdminApi/game.js'
import DetailContainer from "@/components/AdminConponents/DetailContainer.vue";
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {formatTime} from "@/utils/format.js";
import GamePrice from "@/views/AdminViews/GameManagement/Detail/components/GamePrice.vue";
import GameDetail from "@/views/AdminViews/GameManagement/Detail/components/GameDetail.vue";
import GameView from "@/views/AdminViews/GameManagement/Detail/components/GameView.vue";
import GameCategory from "@/views/AdminViews/GameManagement/Detail/components/GameCategory.vue";
import GameRequire from "@/views/AdminViews/GameManagement/Detail/components/GameRequire.vue";

const route = useRoute()
const gameInfo = ref({})
const gamePrice = ref({})
const gameView = ref({})
const gameDetail = ref({})
const gameCategory = ref([])
const gameRequire = ref([])
const gamePublisher = ref({})
const getGameInfo = async (id = route.params.id) => {
  const res = await gameGetAPI(id)
  gameInfo.value = res.data
  gamePrice.value = gameInfo.value.gamePrice
  gameView.value = gameInfo.value.gameView
  gameDetail.value = gameInfo.value.gameDetail
  gameCategory.value = gameInfo.value.gameCategory
  gameRequire.value = gameInfo.value.gameRequire
  gamePublisher.value = gameInfo.value.gamePublisher
}
onMounted(() => getGameInfo())

// 编辑游戏
const router = useRouter()

const publisherDetail = (id) => {
  router.push(`/admin/publisher/detail/${id}`)
}

// 处理不同编辑
const editHandle = (type) => {
  switch (type) {
    case 'game':
      router.push(`/admin/game/edit/game/${gameInfo.value.id}`)
      break;
    case 'gamePrice':
      router.push(`/admin/game/edit/gameprice/${gameInfo.value.id}`)
      break;
    case 'gameCategory':
      router.push(`/admin/game/edit/gamecategory/${gameInfo.value.id}`)
      break;
    case 'gameView':
      router.push(`/admin/game/edit/gameview/${gameInfo.value.id}`)
      break;
    case 'gameDetail':
      router.push(`/admin/game/edit/gamedetail/${gameInfo.value.id}`)
      break;
    case 'gameRequire':
      router.push(`/admin/game/edit/gamerequire/${gameInfo.value.id}`)
      break;
    default:
      return
  }
}
</script>

<template>
  <DetailContainer title="游戏详细">
    <template #bodyTop>
      <el-descriptions border :column="1" :title="`${gameInfo.chineseName}的信息`">
        <template #extra>
          <el-button @click="editHandle('game')" type="success">修改</el-button>
        </template>
        <el-descriptions-item label="名称">{{ gameInfo.chineseName }}({{ gameInfo.englishName }})</el-descriptions-item>
        <el-descriptions-item label="发行日期">{{gameInfo.issueDate}}</el-descriptions-item>
        <el-descriptions-item label="开发商">{{ gameInfo.developer }}</el-descriptions-item>
        <el-descriptions-item label="发行商">
          <el-link @click="publisherDetail(gamePublisher.id)" type="primary" :underline="false" class="ellipsis">
            {{ gamePublisher.publisher }}
          </el-link>
        </el-descriptions-item>
        <el-descriptions-item label="评分">{{ gameInfo.rate }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions border :column="4">
        <el-descriptions-item label="创建时间">{{formatTime(gameInfo.createTime)}}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{formatTime(gameInfo.updateTime)}}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{gameInfo.createUser}}</el-descriptions-item>
        <el-descriptions-item label="修改人">{{gameInfo.updateUser}}</el-descriptions-item>
      </el-descriptions>
    </template>
    <template #bodyBottom>
      <GamePrice :gamePrice @edit="editHandle"/>
      <GameCategory :gameCategory @edit="editHandle"/>
      <GameView :gameView @edit="editHandle"/>
      <GameDetail :gameDetail @edit="editHandle"/>
      <GameRequire :gameRequire @edit="editHandle"/>
    </template>
  </DetailContainer>

</template>

<style scoped>

</style>
